<template>
	<view class="address-management" :class="addressList.length < 1 && page > 1 ? 'fff':''">
	   <view class='line'><image src="../../static/line.jpeg" v-if="addressList.length"></image></view>
	   <radio-group class="radio-group" @change="radioChange" v-if="addressList.length > 0">
		  <view class='item' v-for="(item, index) in addressList" :key='index'>
			  <view class='address' @click="selectAddress(item)">
				<view class='consignee'>收货人：{{item.consignee}}<text class='phone'>{{item.phone}}</text></view>
				<view>收货地址：{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</view>
			  </view>
			  <view class='operation acea-row row-between-wrapper'>
				 <radio class="radio" :value="item.addressId" :checked="item.isDefault == 1 ? true : false">
					<text>设为默认</text>
				 </radio>
				 <view class='acea-row row-middle'>
				   <view @click='editAddress(item.addressId)'><text class='iconfont icon-bianji'></text>编辑</view>
				   <view @click='delAddress(index, item.addressId)'><text class='iconfont icon-shanchu'></text>删除</view>
				 </view>
			  </view>
		  </view>
	   </radio-group>
	   <!-- <view class='loadingicon acea-row row-center-wrapper' v-if="addressList.length > 0 && !loadend">
			<text class='loading iconfont icon-jiazai' :hidden="loading==false"></text>{{loadTitle}}
		 </view> -->
	   <view style='height:120rpx;'></view>
	</view>
</template>

<script>	
	import {
		getAddressList,
		setDefaultAddress,
		delAddress
	} from '@/api/address.js'
	export default {
		props: ['changeListTime', 'fromPage'],
		data() {
			return {
				addressList: [],
				loading: false,				
				loadTitle:'加载更多',
				loadend: false, // 加载到底部
				page: 1, // 页数
				pagesize: 10, // 每页条数
			}
		},
		mounted() {
			console.log(2345);
			this.getList()
		},
		methods: {
			// 获取商品列表
			async getList(isPage) {
				if (isPage) {
					this.loadend = false
					this.page = 1
					this.addressList = []
				}
				if (this.loading) return
				if (this.loadend) return
				this.loading = true
				this.loadTitle = ''
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				});
				const query = {
					page: this.page,
					pagesize: this.pagesize
				}
				getAddressList(query).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						const list = res.data
						this.loadend = list.length < this.pagesize
						this.addressList = [...this.addressList, ...list]
						this.loadTitle = this.loadend ? '我也是有底线的' : '加载更多'
						this.page++
					} else {
						uni.showToast({
							title: '获取数据失败！',
							duration: 1000,
							icon: 'none',
						});
					}
					this.loading = false
				});
				uni.hideLoading()
			},
			// 编辑地址
			editAddress(id) {
				this.$emit('edit', id)
				// this.$bus.$emit('editAddr', id)
				// console.log(id);
			},
			// 选择地址
			selectAddress(record) {
				if (this.fromPage == 'order') {
					var addressInfo = {...record}
					addressInfo.address = addressInfo.provinceName + addressInfo.cityName + addressInfo.areaName + addressInfo.address
					this.$emit('selectAdr', addressInfo)
				}
			},
			// 改变默认地址
			radioChange(e) {
				const addressId = e.detail.value
				console.log(addressId);
				setDefaultAddress({addressId, isDefault: 1}).then(res => {
					if (res.code == 200) {
						this.getList(true)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			// 删除地址
			async delAddress(index, addressId) {
				delAddress({addressId}).then(res => {
					if (res.code == 200) {
						this.addressList.splice(index, 1)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none',
						});
					}
				})
			}
		},
		watch: {
			changeListTime(val) {
				this.getList(true)
			}
		}
	}
</script>

<style lang="less" scoped>
// .address-management.fff{background-color: #fff;height: 100%;}
.address-management .line{width:100%;height:3rpx;}
.address-management .line image{width:100%;height:100%;display:block;}
.address-management .item{background-color:#fff;padding:0 30rpx;margin-bottom:12rpx;}
.address-management .item .address{padding:30rpx 0;border-bottom:1rpx solid #eee;font-size:28rpx;color:#282828;}
.address-management .item .address .consignee{font-size:28rpx;font-weight:bold;margin-bottom:8rpx;}
.address-management .item .address .consignee .phone{margin-left:25rpx;}
.address-management .item .operation{height:83rpx;font-size:28rpx;color:#282828;}
.address-management .item .operation .radio text{margin-left:13rpx;}
.address-management .item .operation .iconfont{color:#2c2c2c;font-size:35rpx;vertical-align:-2rpx;margin-right:10rpx;}
.address-management .item .operation .iconfont.icon-shanchu{margin-left:40rpx;font-size:38rpx;}
radio.radio[checked]::after, radio.radio .uni-radio-input-checked::after{left: -124rpx;}
.radio-group{width: 100%;}
</style>
